<template>
  <div>
    <div class="mall-toptabbar">
      <van-tabs v-model="cateIndex">
        <van-tab
          v-for="tab in tabs"
          :key="`tab-${tab.id}`"
          :title="tab.name"
          :to="`/mall/${tab.id}`"
        >
        </van-tab>
      </van-tabs>
    </div>
    <div class="mall-section">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mail',
  data () {
    return {
      cateIndex: 0,
      tabs: [],
      id: ''
    }
  },
  created () {
    this.$http.getTabs().then(resp => {
      this.tabs = resp.list
      // 让进入商城的那一刻自动跳转转到第一个tabs
      // 如果有id ，说明在刷新，那就不跳转，但需要给cataindex，
      const { id } = this.$route.params
      if (id) {
        this.tabs.forEach((tab, index) => {
          if (tab.id === parseInt(id)) this.cateIndex = index
        })
      } else {
        // 进入商城的那一刻默认访问上面tab的第0个
        this.$router.push(`/mall/${this.tabs[0].id}`)
      }
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 如果当前处于商城页面，再次点击商城按钮使其无效，使其不跳转。
    if (to.name !== 'Mall') {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
.mall-toptabbar{
  border-bottom: 1px solid  rgba(68, 189, 50,1.0);
  .van-tabs__nav{
    background-color: #bdc3c7;
  }
}
.mall-toptabbar .van-tabs__line{
    background-color: rgba(68, 189, 50,1.0);
  }
.mall-section{
  width: 100%;
}
</style>
